<template>
    <div class="opacity-control" :class="{ 'hidden-opacity-control': !showControls }">
        <div v-show="showControls" class="control-panel">
            <NavigationControl :can-go-back="navigationState.canGoBack" :can-go-forward="navigationState.canGoForward"
                :current-url="currentUrl" @navigate="handleNavigate" @go-back="handleGoBack"
                @go-forward="handleGoForward" @refresh="handleRefresh" />

            <BackgroundControl @apply-background="handleApplyBackground"
                @set-transparent="handleSetTransparent" @reset-background="handleResetBackground" />
            <div style="display: flex;">
                <OpacityControl @opacity-change="handleOpacityChange" />

                <ZoomControl @zoom-change="handleZoomChange" />

                <UserAgentControl @user-agent-change="handleUserAgentChange" />
            </div>

            <FontControl @apply-font="handleApplyFont" @reset-font="handleResetFont" />

            <DataClearControl @clear-all-data="handleClearAllData" @clear-local-storage="handleClearLocalStorage"
                @clear-session-storage="handleClearSessionStorage" @clear-cookies="handleClearCookies" />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import NavigationControl from './ControlModule/NavigationControl.vue'
import BackgroundControl from './ControlModule/BackgroundControl.vue'
import OpacityControl from './ControlModule/OpacityControl.vue'
import ZoomControl from './ControlModule/ZoomControl.vue'
import UserAgentControl from './ControlModule/UserAgentControl.vue'
import FontControl from './ControlModule/FontControl.vue'
import DataClearControl from './ControlModule/DataClearControl.vue'

// Props
const props = defineProps({
    showControls: {
        type: Boolean,
        default: true
    },
    navigationState: {
        type: Object,
        default: () => ({
            canGoBack: false,
            canGoForward: false
        })
    },
    currentUrl: {
        type: String,
        default: ''
    }
})

// Emits
const emit = defineEmits([
    'navigate',
    'go-back',
    'go-forward',
    'refresh',
    'apply-background',
    'set-transparent',
    'reset-background',
    'opacity-change',
    'zoom-change',
    'user-agent-change',
    'apply-font',
    'reset-font',
    'clear-all-data',
    'clear-local-storage',
    'clear-session-storage',
    'clear-cookies'
])

// 事件处理方法
function handleNavigate(url) {
    emit('navigate', url)
}

function handleGoBack() {
    emit('go-back')
}

function handleGoForward() {
    emit('go-forward')
}

function handleRefresh() {
    emit('refresh')
}

function handleApplyBackground(color) {
    emit('apply-background', color)
}

function handleSetTransparent() {
    emit('set-transparent')
}

function handleResetBackground() {
    emit('reset-background')
}

function handleOpacityChange(opacity) {
    emit('opacity-change', opacity)
}

function handleZoomChange(zoom) {
    emit('zoom-change', zoom)
}

function handleUserAgentChange(userAgent) {
    emit('user-agent-change', userAgent)
}

function handleApplyFont(fontConfig) {
    emit('apply-font', fontConfig)
}

function handleResetFont() {
    emit('reset-font')
}

function handleClearAllData() {
    emit('clear-all-data')
}

function handleClearLocalStorage() {
    emit('clear-local-storage')
}

function handleClearSessionStorage() {
    emit('clear-session-storage')
}

function handleClearCookies() {
    emit('clear-cookies')
}
</script>

<style scoped>
.opacity-control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    border-radius: 8px;
    -webkit-app-region: drag;
    max-width: 600px;
}

.hidden-opacity-control {
    padding: 8px;
    top: 0;
    left: 0;
}

.control-panel {
    -webkit-app-region: no-drag;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
</style>